<template>
    <div>
        <button @click="emptyAll">清空数量</button>
        <p>价格:{{ price }}</p>
        <p>折扣:{{ discount }}</p>
        <p>数量:
            <button @click="subc">-</button>
            <span>{{ count }}</span>
            <button @click="addc">+</button>
        </p>
        <h3>总价 {{ totalCost }}</h3>
        <p>用 watch 实现看看</p>
        <span>watch:{{ num }}</span>
        <p>watchAll:{{totalNum}}</p>
    </div>
</template>

<script>
export default {
    name: "TestComputedWatch",
    data() {
        return {
            price: 100,
            discount: 0.8,
            count: 0,
            num: 10,
            totalNum:"未知"
        }
        
    },
    // 观察 num 有变动的话就会传值给 val
    watch: {
        num(val) {
            this.totalNum = this.num * val;
        }
    },
    computed: {
        totalCost: function() {
            return this.price * this.discount * this.count
        }
    },
    methods: {
        subc: function() {
            if(this.count > 0) {
                this.count--;
                this.num--
            }
        },
        addc: function() {
            this.count++;
            this.num++
        },
        emptyAll: function() {
            this.count = 0;
        },
    }
}
</script>

<style>

</style>